<template>
	<el-container>
		<div id="gcfx">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="报表方式">
					<el-select v-model="value" placeholder="请报表方式">
						<el-option label="等级" value="1" @click.native="dj"></el-option>
						<el-option label="信用度" value="2" @click.native="dj1"></el-option>
						<el-option label="满意度" value="3" @click.native="dj2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">帮助</el-button>
					<el-button type="danger" @click.prevent="exportExcel">导出</el-button>
				</el-form-item>
			</el-form>
		</div>
		<template>
			<el-table id="out-table" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
				v-show="show" style="width: 100%" max-height="250">
				<el-table-column prop="id" label="编号" width="300" type="index">
				</el-table-column>
				<el-table-column prop="name" label="等级" width="350">
				</el-table-column>
				<el-table-column prop="sun" label="客户数量" width="240">
				</el-table-column>
			</el-table>
		</template>
		<template>
			<el-table id="out-table1" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
				v-show="show" style="width: 100%;display: none;" max-height="250">
				<el-table-column prop="id" label="编号" width="300" type="index">
				</el-table-column>
				<el-table-column prop="agreeLevel" label="信用度" width="350" :formatter="forstate">
				</el-table-column>
				<el-table-column prop="sun" label="客户数量" width="240">
				</el-table-column>
			</el-table>
		</template>
		<template>
			<el-table id="out-table2" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
				v-show="show" style="width: 100%" max-height="250">
				<el-table-column prop="id" label="编号" width="300" type="index">
				</el-table-column>
				<el-table-column prop="creditLevel" label="满意度" width="350" :formatter="forstates">
				</el-table-column>
				<el-table-column prop="sun" label="客户数量" width="240">
				</el-table-column>
			</el-table>
		</template>
		<div id="pieChart" class="chart-container"></div>
	</el-container>

</template>

<script>
	import FileSaver from 'file-saver'
	import XLSX from 'xlsx'
	export default {
		name: "gxfx",
		data() {
			return {
				juese: '',
				currentPage: 1, //初始页
				pagesize: 5, //    每页的数据
				formInline: {
					spr: '',
					gy: '',
					lxr: ''
				},
				tableData: [],
				value: '1',
				show: false,
				show1: false,
				show2: false,
				charts: {},
				pieData: [],
				option: {}
			}
		},
		created() {
			let nowname = localStorage.getItem("reloname");
			this.juese = nowname;
			this.dj();
			this.init();
		},
		watch: {
			pieData: {
				handler(newVal, oldVal) {
					if (this.charts) {
						if (newVal) {
							this.setOption(newVal);
						} else {
							this.setOption(oldVal);
						}
					}
				},
				deep: true
			}
		},
		methods: {
			init() {
				this.$nextTick(() => {
					this.charts = this.$echarts.init(document.getElementById('pieChart'), 'light');
					window.addEventListener('resize', this.handleResize);
				})
			},
			setOption(data) {
				let option = {
					title: {
						text: '客户构成分析',
						subtext: '',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						x: 'center',
						y: 'bottom',
						data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
					},
					toolbox: {
						show: true,
						feature: {
							mark: { show: true },
							dataView: { show: true, readOnly: false },
							magicType: {
								show: true,
								type: ['pie', 'funnel']
							},
							restore: { show: true },
							saveAsImage: { show: true }
						}
					},
					calculable: true,
					series: [
						{
							name: '客户数量',
							type: 'pie',
							radius: [30, 110],
							center: ['50%', '50%'],
							roseType: 'area',
							data: data
						}
					]
				};
				this.charts.setOption(option);
			},
			onSubmit() { },
			getDate() {
				this.$http.get('/a/b').then(res => {
					this.tableData = res.data;
				});
			},
			onSuf() {
			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			dj() {
				this.$http.get('/a/b').then(res => {
					this.tableData = res.data;
					this.pieData = [];
					for (const data of this.tableData) {
						this.pieData.push({ value: data.sun, name: data.name });
					}
				});
			},
			dj1() {
				this.$http.get('/a/c').then(res => {
					this.tableData = res.data;
					this.pieData = [];
					for (const data of this.tableData) {
						this.pieData.push({ value: data.sun, name: '信誉度' + data.agreeLevel + '级' });
					}
				});
			},
			dj2() {
				this.$http.get('/a/d').then(res => {
					this.tableData = res.data;
					console.log(res.data);
					this.pieData = [];
					for (const data of this.tableData) {
						this.pieData.push({ value: data.sun, name: '满意度' + data.creditLevel + '级' });
					}
				});
			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			},
			forstate(row, column) {
				switch (row.agreeLevel) {
					case 1:
						return '☆'
						break;
					case 2:
						return '☆☆'
						break;
					case 3:
						return '☆☆☆'
						break;
					case 4:
						return '☆☆☆☆'
						break;
					case 5:
						return '☆☆☆☆☆'
						break;
					default:
						break;
				}
			},
			forstates(row, column) {
				switch (row.creditLevel) {
					case 1:
						return '☆'
						break;
					case 2:
						return '☆☆'
						break;
					case 3:
						return '☆☆☆'
						break;
					case 4:
						return '☆☆☆☆'
						break;
					case 5:
						return '☆☆☆☆☆'
						break;
					default:
						break;
				}
			},
			exportExcel() {
				let tableNode = '';
				if (this.value == 1) {
					tableNode = '#out-table';
				} else if (this.value == 2) {
					tableNode = '#out-table1';
				} else if (this.value == 3) {
					tableNode = '#out-table2';
				}
				var wb = XLSX.utils.table_to_book(document.querySelector(tableNode))
				var wbout = XLSX.write(wb, {
					bookType: 'xlsx',
					bookSST: true,
					type: 'array'
				})
				try {
					FileSaver.saveAs(new Blob([wbout], {
						type: 'application/octet-stream'
					}), '客户构成分析.xlsx')
				} catch (e) {
					if (typeof console !== 'undefined') console.log(e, wbout)
				}
				return wbout
			}
		}
	}
</script>

<style scoped="scoped">
	#oppoyment {
		margin-left: 40px;
	}

	.line {
		background: black;
	}

	#gcfx {
		width: 65%;
		/* padding: 30px 80px;
		background-color: #F0F0F0;
		border: 1px solid #ddd;
		border-radius: 5px;
		position: relative;
		left: 150px !important;
		top: 20px; */
		padding: 15px;
		background-color: #F0F0F0;
		border: 1px solid #ddd;
		border-radius: 5px;
		position: relative;
		left: 155px !important;
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
		position: relative;
		left: 150px;
	}

	body {
		background-color: #000000 !important;
	}

	.container {
		position: relative;
	}

	#gxfx>>>.el-main {
		margin: 0 !important;
		padding: 0 !important;
	}

	.chart-container {
		border-radius: 4px;
		width: 50%;
		height: 400px;
		background: #FBFBFB;
		box-shadow: 0 1px 10px 2px rgba(182, 191, 196, 0.5);
		padding: 20px;
		position: absolute;
		top: 25%;
		left: 31%;
	}
</style>